<template>
    <div>
      <div class="btns">
        <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>  
      </div>
      <div class="table_control">

        <!-- 表单 -->
        <el-table
        :data="baseuser"
        style="width: 100%">
        <el-table-column
          prop="username"
          label="用户名字"
          width="180">
        </el-table-column>
        <el-table-column
          prop="id"
          label="用户编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="email"
          label="用户邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="password"
          label="用户密码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="telephone"
          label="电话">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="birth"
          label="生日">
            <template slot-scope="scope">
              {{scope.row.birth | fmtDate}}
            </template>
        </el-table-column>
        <el-table-column
          prop="registerTime"
          label="注册时间">
          <template slot-scope="scope">
              {{scope.row.registerTime | fmtDate}}
            </template>
        </el-table-column>
        <el-table-column
          prop="realname"
          label="用户等级">
        </el-table-column>


        <!-- 操作列 -->
        <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
  </div>
</template>

<script>
import { get,del} from '@/utils/request'

export default {
  // 定义变量，在模板中直接用用
  data(){
    return {
      baseuser:[],
      visible:false
    }
  },
  // 定义事件处理函数、方法
  methods:{

 // 删除的处理函数
    deleteHandler(row){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "http://localhost:8888/BaseUser/deleteById"

        del(url,{id:row.id}).then(resp =>{
          // console.log(resp);
          // 1. 提示
          this.$message({type:"success",message:resp.message});
          // 2. 刷新
          this.LoadBaseuser();
        })
      })
    },
    // 修改的处理函数
    editHandler(row){
      this.$router.push({ 
        path:"/hyz/baserUserform" ,
        query:row
      })
    },
    // 查询所有的用户的数据
    LoadBaseuser(){
      let url = "http://localhost:8888/BaseUser/query"
      get(url).then(resp => {
        // 获取数据之后做的事情
        // console.log(resp);
        this.baseuser = resp.data;
      })
    },
    //新增跳转
    toFormHandler(){

      this.$router.push({ path:"/hyz/baserUserform" })
    }
  },
  // 生命周期钩子函数
  created(){
    this.LoadBaseuser();
  }
}
</script>

<style lang="sass" scoped>


</style>